<template>
  <view class="order-failed" :style="customStyle">
    <view class="order-failed__details">
      <image :src="'purchanse-cart/order-failed.png' | prefixOssUrl"></image>
      <view class="success">抱歉！由于长时间未正确提交订单， 订单已被取消，请重新下单！</view>
    </view>

    <view class="order-failed__another-order" @tap="swi(`/pages/index/index`)"> 返回首页 </view>
  </view>
</template>
<script>
  export default {
    props: {
      customStyle: {
        type: String,
        default: ''
      },
    },
  };
</script>
<style lang="less" scoped>
  .order-failed {
    position: relative;
    min-height: var(--order-failed-height, 100vh);
    background: #eee;

    .order-failed__details {
      position: absolute;
      top: 210rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;

      image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 40rpx;
      }

      >view {
        width: 457rpx;
        font-size: 30rpx;
        color: #333;
        line-height: 44rpx;
        text-align: center;
      }
    }

    .order-failed__another-order {
      position: fixed;
      bottom: 180rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(100% - 150rpx);
      margin: 0 75rpx;
      height: 90rpx;
      font-size: 34rpx;
      color: #fff;
      background: #db187c;
      border-radius: 6rpx;
    }


  }
</style>